<template>
    <div>
        <div class="seach_box">
                <div class="left_semicircle"></div>
                <input type="text" v-model="value" placeholder="搜索歌曲、歌手、专辑" @keyup.enter="Searchkeyword">
                <div class="right_semicircle"></div>
        </div>
       
        <ul v-if="show&&!value" class="Search_Word">
            <h3>热门搜索</h3>
            <SearchWord v-for="item in search" :key="item.id" :item="item"
            @xsxs='value=$event'
            />
        </ul>
        <div  v-if="!show&&value">
            <h3 class="searcha">搜索"{{this.value}}"</h3>
            <SearchKey v-for="item in songs" :key="item.id" :item="item" :value="value" @click.native="$emit('update:currentSong',item)"/>
        </div>
    </div>
</template>

<script>
import SearchKey from '@/components/SearchKey.vue';
import SearchWord from '@/components/SearchWord.vue';
export default {
    props: {
        // value,
    },
    data: function () {
        return {
            search: Array,
            value: null,
            songs: Array,
            show: true,
        }
    },
    components: {
        SearchWord,
        SearchKey,
    },
    methods: {
        Searchkeyword: function () {
            this.axios
            .get("https://apis.netstart.cn/music/search?keywords=" + this.value)
            .then((res) => {
                console.log(res.data.result.songs);
                this.songs = res.data.result.songs;
                this.songs = res.data.result.songs;
        });
         this.show = false;
      },
    },
    created: function () {
        this.axios
        .get("https://apis.netstart.cn/music//search/hot")
        .then((res) => {
            // console.log(res, this);
            // console.log(res.data.result.hots);
            this.search = res.data.result.hots;
        });
    }
    }
</script>

<style lang="less">
    .Search_Word{
        margin: 0;
        padding: 0;
        padding: 15px 10px 0;
        h3 {
            font-size: 12px;
            line-height: 12px;
            color: #666;
            font-weight: 300;
            margin: 0;
            margin-bottom: 13px;
        }
    }
    .seach_box {
        display: flex;
        padding: 15px 10px;
        position: relative;
        border-bottom: 0.5px solid rgba(102, 102, 102, 0.329);
    }
    
    .left_semicircle {
        width: 30px;
        height: 30px;
        background: #ebecec;
        border-radius: 30px
    }
    input {
        width: 80%;
        height: 30px;
        padding: 0;
        border: 0;
        background: #ebecec;
        position: absolute;
        left: 30px;
        outline: medium;
    }
    .right_semicircle {
        width: 30px;
        height: 30px;
        margin-left: 79%;
        background: #ebecec;
        border-radius: 30px
    }
    .xian {
        margin-top: 10px;
      
    }
    .searcha {
        height: 50px;
        margin-left: 10px;
        padding-right: 10px;
        font-size: 15px;
        line-height: 50px;
        color: #507daf;
    }
</style>